<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const index = ref('')
const title = ref('')
const selectedItemIndex = ref(0);
const percents = ref(75);


const bookTabsitems = [
  { id: 1, name: '热门书籍' },
  { id: 2, name: '科学书籍' },
  { id: 3, name: '文化书籍' },
  { id: 4, name: '经济书籍' },
  { id: 5, name: '经济书籍' },
  { id: 6, name: '经济书籍' }
];

const bookImg = [
  {
    id: 1,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '百年孤独',
    author: '马尔克斯'
  },
  { id: 2, image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg', name: '活着', author: '余华' },
  {
    id: 3,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '小王子',
    author: '圣埃克苏佩里'
  },
  {
    id: 4,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '挪威的森林',
    author: '村上春树'
  },
  {
    id: 5,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '红楼梦',
    author: '曹雪芹'
  },
  { id: 6, image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg', name: '围城', author: '钱钟书' },
  { id: 7, image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg', name: '三体', author: '刘慈欣' },
  {
    id: 8,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '1984',
    author: '乔治·奥威尔'
  },
  {
    id: 9,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '白夜行',
    author: '东野圭吾'
  },
  {
    id: 10,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '追风筝的人',
    author: '卡勒德·胡赛尼'
  }
];

onLoad((opsition) => {
  console.log(opsition);
  index.value = opsition.index;
  title.value = opsition.title
});

const leftClick = () => {
  uni.navigateBack();
};

const selectItem = (item, index) => {
  console.log('bookItem', item);
  selectedItemIndex.value = index;
};

const bookTopClick = (item) => {
  uni.navigateTo({
    url: '/pages/index/components/AI-book-item?id=' + item.id + '&name=' + item.name
  })
};

</script>

<template>
  <fui-nav-bar :isFixed="true" :isOccupy="true" :title="title" size="16" @leftClick="leftClick">
    <fui-icon :size="48" name="arrowleft"></fui-icon>
  </fui-nav-bar>
  <view class="AI-book">
    <view class="sreach-box">
      <fui-icon :size="30" color="#999999" name="search"></fui-icon>
      <text>请输入需要搜索的课程</text>
    </view>
    <view class="book-scroll">
      <scroll-view :scroll-with-animation="true" class="scroll-view-content" scroll-x>
        <view v-for="(item, index) in bookTabsitems" :key="index" :class="{ 'selected': selectedItemIndex === index }"
          class="scroll-item" @click="selectItem(item, index)">
          {{ item.name }}
        </view>
      </scroll-view>
    </view>
    <view class="book-img-box">
      <scroll-view :scroll-with-animation="true" class="scroll-item-book" scroll-x>
        <view v-for="(item, index) in bookImg" :key="index" class="scroll-item-img" @click="bookTopClick(item)">
          <view class="book-img-item">
            <image :src="item.image" class="book-item-image" />
            <view class="book-name">{{ item.name }}</view>
            <view class="book-author">作者：{{ item.author }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="statistics">
      <image class="stat-image" src="https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg" />
      <view class="stat-content">
        <view class="cont-top">生命的重建</view>
        <view class="cont-bot">作者：skjfhdff</view>
      </view>
      <view class="cont-circle">
        <fui-circle :percent="percents" :size="12" color="rgba(18, 134, 140, 1)" foreground="#28949a"
          gradient="#62d9de"></fui-circle>
      </view>
    </view>
    <view class="book-content">
      <fui-grid :showBorder="false" :square="false">
        <fui-grid-item v-for="(item, index) in bookImg" :key="index" @click="bookTopClick(item)">
          <view class="fui-grid__cell fui-padding" style="margin: 15rpx;">
            <image :src="item.image" class="connt-image" />
            <view class="connt-top">{{ item.name }}</view>
            <view class="connt-bot">作者：{{ item.author }}</view>
          </view>
        </fui-grid-item>
      </fui-grid>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.AI-book {
  padding: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .sreach-box {
    width: 670rpx;
    height: 84rpx;
    background-color: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      width: 80%;
      font-size: 28rpx;
      color: #999999;
    }
  }

  .book-scroll {
    margin: 20rpx;
    width: 100%;
    height: 70rpx;
    overflow: hidden;

    .scroll-view-content {
      white-space: nowrap;

      .scroll-item {
        width: 136rpx;
        height: 58rpx;
        border-radius: 12rpx;
        display: inline-block;
        text-align: center;
        line-height: 58rpx;
        font-size: 24rpx;
        font-weight: 600;
        color: rgba(18, 134, 140, 1);
        background-color: rgba(18, 134, 140, 0.1);
        margin-right: 20rpx;
        cursor: pointer;
        overflow: hidden;
      }

      .selected {
        background-color: rgba(18, 134, 140, 1);
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  .book-img-box {
    margin: 20rpx;
    width: 100%;
    height: 418rpx;

    .scroll-item-book {
      white-space: nowrap;

      .scroll-item-img {
        width: 240rpx;
        height: 418rpx;
        display: inline-block;
        margin-right: 20rpx;

        .book-img-item {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          flex-direction: column;

          .book-item-image {
            width: 240rpx;
            height: 320rpx;
            border-radius: 28.8rpx;
            overflow: hidden;
          }

          .book-name {
            font-weight: 600;
            font-size: 28rpx;
            color: rgba(18, 134, 140, 1);
          }

          .book-author {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
        }
      }
    }
  }

  .statistics {
    margin: 20rpx;
    width: 670rpx;
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 24rpx;
    background: linear-gradient(302.79deg, rgba(18, 134, 140, 0.1) 7.39%, rgba(93, 218, 224, 0.1) 71.89%, rgba(162, 250, 255, 0.1) 98.88%);

    .stat-image {
      width: 90rpx;
      height: 120rpx;
      border-radius: 10.8rpx;
      overflow: hidden;
    }

    .stat-content {
      height: 120rpx;
      width: 364rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .cont-top {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(18, 134, 140, 1);
      }

      .cont-bot {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(18, 134, 140, 1);
      }

      .cont {
        height: 96rpx;
        width: 96rpx;
      }
    }
  }

  .book-content {
    margin: 20rpx;
    width: 100%;

    .fui-grid__cell {
      .connt-image {
        width: 210rpx;
        height: 280rpx;
        border-radius: 26rpx;
        overflow: hidden;
      }

      .connt-top {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(18, 134, 140, 1);
      }

      .connt-bot {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
}
</style>